<template>
  <view class="content">
    <ZLNavBar title="zhuye" />
    <image class="logo" :src="img || '/static/logo.png'"></image>
    <ZLTab
      :tabs="[
        { name: '标签1', content: '内容1' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
        { name: '标签2', content: '内容2' },
      ]"
    />
    <ZLSuspension
      :isDock="true"
      :edge="{ left: 30, right: 30, top: 30, bottom: 30 }"
    >
      <div
        style="
          background-color: red;
          color: #fff;
          height: 50rpx;
          width: 140rpx;
          border-radius: 10rpx;
        "
      >
        自动靠边
      </div>
    </ZLSuspension>
    <ZLButton>132456</ZLButton>
    <ZLCanvas @change="changeImage">
      <template #button> 生成图片 </template>
    </ZLCanvas>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <ZLTabbar :tabbarItem="aa" shape="round" v-model="bb"> </ZLTabbar>
  </view>
</template>

<script setup>
import { ref } from "vue";
import ZLSuspension from "@/components/zl-suspension/index.vue";
import ZLCanvas from "@/components/zl-canvas/index.vue";
import ZLTab from "@/components/zl-tab/index.vue";
import ZLButton from "@/components/zl-button/index.vue";
import ZLTabbar from "@/components/zl-tabbar/index.vue";
import ZLNavBar from "@/components/zl-navbar/index.vue";
const bb = ref(0);
const aa = [
  {
    label: "111",
    key: "home",
    icon: "23",
    url: "/pages/short_video/nvueSwiper/index",
    isDot: true,
  },
  {
    label: "111",
    key: "health",
    url: "/pages/live/living",
    img: "/static/logo.png",
    value: 10,
  },
  {
    label: "111",
    key: "video",
    url: "/pages/healths/index",
    img: "/static/logo.png",
  },
  {
    label: "111",
    key: "shopStreet",
    img: "/static/logo.png",
    url: "/pages/store/shopStreet/index",
  },
  {
    label: "111",
    key: "my",
    url: "/pages/user/index",
    img: "/static/logo.png",
  },
];
const img = ref();
const changeImage = (e) => {
  console.log(e);
  img.value = e;
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
